package com.ljdemo.timemanager.ui.screen.mainnav

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemDefaults
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.lifecycle.ViewModel
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.ljdemo.timemanager.R
import com.ljdemo.timemanager.config.MainNavRoute
import com.ljdemo.timemanager.ui.screen.mainnav.countdown.CountDownView
import com.ljdemo.timemanager.ui.screen.mainnav.home.HomeView
import com.ljdemo.timemanager.ui.screen.mainnav.stopwatch.StopWatchView
import com.ljdemo.timemanager.ui.theme.TimeManagerTheme
import kotlinx.coroutines.flow.MutableStateFlow

class MainViewModel:ViewModel(){
    private val _navBottomState= MutableStateFlow(true)
    val navBottomState=_navBottomState

    fun changeBottomState(state:Boolean){
        _navBottomState.apply {
            value=state
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class, ExperimentalAnimationApi::class)
@Composable
fun MainNavView (){
    val mainViewModel:MainViewModel= MainViewModel()
    val navBottomState by mainViewModel.navBottomState.collectAsState()
//    Text(text = "主页")
    // 导航栏图片文字列表
    val navList = listOf(
        Pair("主页", R.drawable.home),
        Pair("倒计时", R.drawable.count),
        Pair("秒表", R.drawable.second),
    )
    // 选中下标，响应式的
    var nowActiveIndex by remember {
        mutableStateOf(0)
    }
    val mainNavController = rememberNavController()
    // 设置子页面切换时的监听器
    mainNavController.addOnDestinationChangedListener {_,destination,_->
        MainNavRoute.apply {
            when(destination.route){
                HOME-> {
                    nowActiveIndex=0
                }
                COUNT_DOWN-> {
                    nowActiveIndex=1
                }
                STOP_WATCH-> {
                    nowActiveIndex=2
                }
            }
        }
    }
    Scaffold(modifier = Modifier.fillMaxSize()
        , bottomBar = { // 设置底部导航栏

            AnimatedVisibility(
                visible = navBottomState,
                enter = scaleIn()+ fadeIn(),
                exit = scaleOut()+ fadeOut()
            ) {
                NavigationBar {
                    navList.forEachIndexed { index, pair ->
                        NavigationBarItem(
                            selected = nowActiveIndex == index,// 当nowActiveIndex等于index时被选中，nowActiveIndex是响应式的
                            onClick = {
                                nowActiveIndex = when(index){
                                    0->{
//                                    mainNavController.navigate(MainNavRoute.HOME) // 返回
                                        mainNavController.mainNavTo(MainNavRoute.HOME)
                                        index
                                    }
                                    1->{
                                        mainNavController.mainNavTo(MainNavRoute.COUNT_DOWN)
                                        index
                                    }
                                    2->{
                                        mainNavController.mainNavTo(MainNavRoute.STOP_WATCH)
                                        index
                                    }
                                    else -> {
                                        -1
                                    }
                                }
                            },
                            icon = {
                                Icon(
                                    modifier = Modifier.size(25.dp),// 大小
                                    painter = painterResource(id = pair.second),
                                    contentDescription = pair.first,
                                    tint = MaterialTheme.colorScheme.primary // 图标颜色
                                )
                            },
                            label = {
                                Text(text = pair.first)
                            },
                            colors = NavigationBarItemDefaults.colors(
                                selectedTextColor = MaterialTheme.colorScheme.primary // 修改选中时文字颜色
                            )
                        )
                    }
                }
            }
    }) {
        Box(modifier = Modifier.padding(it)) {
            NavHost(navController = mainNavController, startDestination = MainNavRoute.HOME){
                composable(MainNavRoute.HOME){
                    HomeView(mainViewModel)
                }
                composable(MainNavRoute.COUNT_DOWN){
                    CountDownView()
                }
                composable(MainNavRoute.STOP_WATCH){
                    StopWatchView()
                }
            }
        }
    }
}

// 返回扩展函数，对 NavHostController 的扩展
fun NavHostController.mainNavTo(route:String){
    // 一直退，直到默认值，this代表 NavHostController
    this.navigate(route){
        popUpTo(this@mainNavTo.graph.findStartDestination().id)
        launchSingleTop=true // 如果退出到的页面之前已经加载过，就不会创建新的
    }
}

@Preview(showBackground = true)
@Composable
fun MainNavPreView(){
    TimeManagerTheme {
        MainNavView()
    }
}